<template>
  <div class="config">
    <!-- <x-header v-show="!isWeChar">
      <div slot="default" class="common__header--title">分享配置</div>
      <div  slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
    </x-header> -->
    <group class="config__formPolicy--group">
      <cell>
        <span class="config__list--title" slot="after-title">
          <span class="config__iconspan"></span>
          <span class="config__iconspan--title">分享信息</span>
        </span>
      </cell>

      <div class="config__formPolicy">
        <div>
          <x-input placeholder="创建用户" id="testDemo" v-model="userCode">
            <div class="config__input " slot="label">
              <img src="~assets/x3/ico/icon-user.png" class="icon-img">&nbsp&nbsp
              <!-- 姓名&nbsp -->
            </div>
          </x-input>
          <x-input placeholder="业务关系代码" v-model="agrementNo">
            <div class="config__input" slot="label">
              <!-- 证件号码&nbsp -->
              <img src="~assets/x3/ico/icon-agrcode.png" class="icon-img">&nbsp&nbsp
            </div>
          </x-input>

          <x-input placeholder="销售人员编码" v-model="saleCode" keyboard="number">
            <div class="config__input" slot="label">
              <img src="~assets/x3/ico/icon-coded.png" class="icon-img">&nbsp&nbsp
            </div>
          </x-input>

          <x-input placeholder="销售人员名字" v-model="saleName">
            <div class="config__input" slot="label">
              <img src="~assets/x3/ico/icon-name.png" class="icon-img">&nbsp&nbsp
            </div>
          </x-input>

          <x-input placeholder="销售渠道名称(例：重庆分公司)" v-model="channelName">
            <div class="config__input" slot="label">
              <img src="~assets/x3/ico/icon-ent.png" class="icon-img">&nbsp&nbsp
            </div>
          </x-input>
        </div>
      </div>
    </group>

    <group class="config__formPolicy--group">
      <cell>
        <span class="config__list--title" slot="after-title">
          <span class="config__iconspan"></span>
          <span class="config__iconspan--title">参数信息</span>
        </span>
      </cell>

      <div class="config__formPolicy">
        <div>
          <x-input placeholder="唯一标识(用于标识来源)" id="testDemo" v-model="uid">
            <div class="config__input " slot="label">
              <img src="~assets/x3/ico/icon-url.png" class="icon-img">&nbsp&nbsp
              <!-- 姓名&nbsp -->
            </div>
          </x-input>
          <x-input placeholder="回调URL" id="testDemo" v-model="reUrl">
            <div class="config__input " slot="label">
              <img src="~assets/x3/ico/icon-url.png" class="icon-img">&nbsp&nbsp
              <!-- 姓名&nbsp -->
            </div>
          </x-input>
          <x-input placeholder="出单员" v-model="numId">
            <div class="config__input" slot="label">
              <!-- 证件号码&nbsp -->
              <img src="~assets/x3/ico/icon-card.png" class="icon-img">&nbsp&nbsp
            </div>
          </x-input>
          <x-input placeholder="支付成功回调地址" v-model="suceUrl">
            <div class="config__input" slot="label">
              <!-- 证件号码&nbsp -->
              <img src="~assets/x3/ico/icon-card.png" class="icon-img">&nbsp&nbsp
            </div>
          </x-input>
          <x-input placeholder="业务关系代码" v-model="agreementCode">
            <div class="config__input" slot="label">
              <!-- 证件号码&nbsp -->
              <img src="~assets/x3/ico/icon-card.png" class="icon-img">&nbsp&nbsp
            </div>
          </x-input>
          <x-input placeholder="销售人员名称" v-model="salerName">
            <div class="config__input" slot="label">
              <!-- 证件号码&nbsp -->
              <img src="~assets/x3/ico/icon-card.png" class="icon-img">&nbsp&nbsp
            </div>
          </x-input>
          <x-input placeholder="销售人员代码" v-model="salerNumber">
            <div class="config__input" slot="label">
              <!-- 证件号码&nbsp -->
              <img src="~assets/x3/ico/icon-card.png" class="icon-img">&nbsp&nbsp
            </div>
          </x-input>
          <x-input placeholder="销售渠道名称(例：重庆分公司)" v-model="shChannelName">
            <div class="config__input" slot="label">
              <img src="~assets/x3/ico/icon-ent.png" class="icon-img">&nbsp&nbsp
            </div>
          </x-input>
        </div>
      </div>
    </group>

    <group class="config__formPolicy--group">
      <cell>
        <span class="config__list--title" slot="after-title">
          <span class="config__iconspan"></span>
          <span class="config__iconspan--title">分享内容</span>
        </span>
      </cell>

      <div class="config__formPolicy">
        <div>
          <cell>
            <selector class="insure_sele" v-model="sharePage" slot="after-title" placeholder="分享内容" :options="shareSeleList">
            </selector>
            <img src="~assets/x3/ico/icon-hometype.png" slot="icon" class="icon-img">&nbsp&nbsp
          </cell>
          <x-input v-show="isShowId" placeholder="产品id" v-model="proId">
            <div class="config__input" slot="label">
              <!-- 证件号码&nbsp -->
              <img src="~assets/x3/ico/icon-card.png" class="icon-img">&nbsp&nbsp
            </div>
          </x-input>

        </div>
      </div>
    </group>

    <group class="config__formPolicy--group">
      <cell>
        <span class="config__list--title" slot="after-title">
          <span class="config__iconspan"></span>
          <span class="config__iconspan--title">底部内容配置</span>
        </span>
      </cell>
      <checklist label-position="left" :options="commonList" v-model="checklist002"></checklist>
      <div class="config__formPolicy">
        <!-- <div>
          <checklist disabled label-position="left" :options="commonList" v-model="checklist002"></checklist>
        </div> -->
      </div>
    </group>

    <group class="config__formPolicy--group">
      <cell>
        <span class="config__list--title" slot="after-title">
          <span class="config__iconspan"></span>
          <span class="config__iconspan--title">底部内容配置</span>
        </span>
      </cell>

      <x-textarea v-model="shareUrl" class="repIm__textarea" :max="2000" :autosize="true" name="description" placeholder="生成URL">
        <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon-remark.png" class="icon-img">&nbsp&nbsp</div>
      </x-textarea>
    </group>
    <!-- <x-button>生成url</x-button>
    <x-button>复制</x-button> -->
    <div style="margin-bottom: 20px;margin-left: 10px;">
      <x-button @click.native="setUrl" mini type="primary">生成url</x-button>
      <!-- <x-button @click.native="clipUrl" mini type="primary">复制url</x-button> -->
    </div>

    <group class="config__formPolicy--group">
      <cell>
        <span class="config__list--title" slot="after-title">
          <span class="config__iconspan"></span>
          <span class="config__iconspan--title">重新回调url</span>
        </span>
      </cell>

      <x-textarea v-model="documentNo" class="repIm__textarea" :max="100" :autosize="true" name="description" placeholder="投保单号">
        <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon-remark.png" class="icon-img">&nbsp&nbsp</div>
      </x-textarea>
      <cell>
        <selector class="insure_sele" v-model="isJump" slot="after-title" placeholder="是否跳转页面" :options="isJumpList">
        </selector>
        <img src="~assets/x3/ico/icon-hometype.png" slot="icon" class="icon-img">&nbsp&nbsp
      </cell>
    </group>
    <!-- <x-button>生成url</x-button>
    <x-button>复制</x-button> -->
    <div style="margin-bottom: 20px;margin-left: 10px;">
      <x-button @click.native="callBack" mini type="primary">回调</x-button>
      <!-- <x-button @click.native="clipUrl" mini type="primary">复制url</x-button> -->
    </div>

    <group class="config__formPolicy--group">
      <cell>
        <span class="config__list--title" slot="after-title">
          <span class="config__iconspan"></span>
          <span class="config__iconspan--title">合并</span>
        </span>
      </cell>

      <x-textarea v-model="userCodeMar" class="repIm__textarea" :max="100" :autosize="true" name="description" placeholder="合并">
        <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon-remark.png" class="icon-img">&nbsp&nbsp</div>
      </x-textarea>
    </group>
    <!-- <x-button>生成url</x-button>
    <x-button>复制</x-button> -->
    <div style="margin-bottom: 20px;margin-left: 10px;">
      <x-button @click.native="userCodeMarMe" mini type="primary">合并</x-button>
      <!-- <x-button @click.native="clipUrl" mini type="primary">复制url</x-button> -->
    </div>

    <!-- <div class="insure__footer">
      <div @click="setUrl" class="insure__rightbtn">生成url</div>
    </div> -->
  </div>
</template>

<script>
import CarAttributively from "src/components/CarAttributively";
import { RequestUrl } from "src/common/url";
import {
  Mutations,
  Gender,
  PerIdentifyType,
  EntIdentifyType,
  benefType,
  configdidentity,
  intervalTime,
  RouteUrl,
  Url_Key
} from "src/common/const";
import {
  XHeader,
  Group,
  Cell,
  XInput,
  Datetime,
  XSwitch,
  Selector,
  XButton,
  XDialog,
  CellFormPreview,
  Actionsheet,
  TransferDom,
  Toast,
  CheckIcon,
  Checklist,
  XTextarea
} from "vux";
import Validation from "src/common/util/validation";
import DateUtil from "src/common/util/dateUtil";
import { mapState, mapActions } from "vuex";
export default {
  components: {
    CellFormPreview,
    XDialog,
    Selector,
    XHeader,
    Group,
    Cell,
    XInput,
    Datetime,
    XSwitch,
    XButton,
    Actionsheet,
    TransferDom,
    Toast,
    CheckIcon,
    CarAttributively,
    Checklist,
    XTextarea
  },
  computed: mapState({
    // config: "config",
    isLoading: "isLoading",
    user: "user",

    saveconfig: "saveconfig",
    detailsStore: "detailsStore",
    isWeChar: "isWeChar",
    carAddr: "carAddr",
    isWeAuth: "isWeAuth"
  }),
  data() {
    return {
      userCodeMar: "",
      documentNo: "",
      shareUrl: "",
      checklist002: ['首页', '保险', '服务', '我的', '是否显示底部', '是否显示头部返回按钮', "是否微信授权"],
      commonList: ['首页', '保险', '服务', '我的', '是否显示底部', '是否显示头部返回按钮', "是否微信授权"],
      sharePage: '',
      shareSeleList: [{
        key: RouteUrl.INDEX,
        value: "首页"
      }, {
        key: RouteUrl.INSURANCE,
        value: "更多保险"
      }, {
        key: RouteUrl.SERVICE,
        value: "服务"
      }, {
        key: RouteUrl.DETAILS,
        value: "产品"
      },
      ],
      isJumpList: [{
        key: true,
        value: "是"
      }, {
        key: false,
        value: "否"
      }
      ],

      shChannelName: "",
      agreementCode: "",
      salerName: "",
      salerNumber: "",
      userCode: "",
      shareId: "",
      productId: "",
      shareType: "",
      agrementNo: "",
      saleCode: "",
      saleName: "",
      channelName: "",
      reUrl: "",
      numId: "",
      proId: "",
      suceUrl: "",
      isShowId: false,
      uid: "",
      isJump: true,
    };
  },
  watch: {
    sharePage(cur, old) {
      if (cur == RouteUrl.DETAILS) {
        this.isShowId = true;
      } else {
        this.isShowId = false;
      }
    }
  },
  filters: {

  },
  methods: {
    callBack() {
      let parm = {
        documentNo: this.documentNo,
        isJump: this.isJump,
        TYPE: "FORM"
      }
      this.$http.post(RequestUrl.CALL_BACK_URL, parm)
        .then(function (res) {
        })
    },
    clipUrl() {
      // alert(1);
      window.clipboardData.setData("Text", this.shareUrl);
    },
    setUrl() {
      let _this = this;
      let btnText = "";
      for (let i = 0; i < this.checklist002.length; i++) {
        btnText += this.checklist002[i];
      }
      let shareId = "";
      if (btnText.indexOf('首页') > -1) {
        shareId += "1";
      } else {
        shareId += "0";
      }
      if (btnText.indexOf('保险') > -1) {
        shareId += "1";
      } else {
        shareId += "0";
      }
      if (btnText.indexOf('服务') > -1) {
        shareId += "1";
      } else {
        shareId += "0";
      }
      if (btnText.indexOf('我的') > -1) {
        shareId += "1";
      } else {
        shareId += "0";
      }
      if (btnText.indexOf('是否显示底部') > -1) {
        shareId += "1";
      } else {
        shareId += "0";
      }
      if (btnText.indexOf('是否显示头部返回按钮') > -1) {
        shareId += "1";
      } else {
        shareId += "0";
      }
      if (btnText.indexOf('是否微信授权') > -1) {
        shareId += "1";
      } else {
        shareId += "0";
      }

      shareId += this.$common.getUuid().substring(0, 6);
      shareId += "henghua";
      let parmList = [];
      let urlParm = {
        key: Url_Key.SHARE_UUID,
        value: shareId
      }
      parmList.push(urlParm);

      if (this.isShowId) {
        let urlPro = {
          key: Url_Key.PRODUCT_ID,
          value: this.proId
        }
        parmList.push(urlPro);
      }
      if (this.reUrl != "") {
        let reUrl = {
          key: Url_Key.REDIRECT_URL,
          value: this.reUrl
        }
        parmList.push(reUrl);
      }
      if (this.numId != "") {
        let numId = {
          key: Url_Key.RECORDED_ID,
          value: this.numId
        }
        parmList.push(numId);
      }
      if (this.suceUrl != "") {
        let suceUrl = {
          key: Url_Key.SUCC_URL,
          value: this.suceUrl
        }
        parmList.push(suceUrl);
      }
      if (this.agreementCode != "") {
        let aggUrl = {
          key: Url_Key.AGREEMENT_CODE,
          value: this.agreementCode
        }
        parmList.push(aggUrl);
      }
      if (this.salerName != "") {
        let salerNameUrl = {
          key: Url_Key.SALER_NAME,
          value: this.salerName
        }
        parmList.push(salerNameUrl);
      }
      if (this.salerNumber != "") {
        let salerNumber = {
          key: Url_Key.SALER_NUMBER,
          value: this.salerNumber
        }
        parmList.push(salerNumber);
      }
      if (this.shChannelName != "") {
        let shChannelName = {
          key: Url_Key.CHANNEL_NAME,
          value: this.shChannelName
        }
        parmList.push(shChannelName);
      }

      if (this.uid != "") {
        let uid = {
          key: Url_Key.UID,
          value: this.uid
        }
        parmList.push(uid);
      }

      let shareUrl = RequestUrl.BASE_URL + this.sharePage + this.$common.setShareUrl(parmList);
      this.shareUrl = shareUrl;

      let shareData = {
        TYPE: "FORM",
        userCode: this.userCode,
        shareId: shareId,
        productId: this.sharePage,
        shareType: "生成url",
        agrementNo: this.agrementNo,
        saleCode: this.saleCode,
        saleName: this.saleName,
        channelName: this.channelName
      };
      // let uuidShare = _this.shareUuid + "";
      _this.$http.post(RequestUrl.SAVE_SHARE, shareData).then(function (res) {
      });

    },
    userCodeMarMe() {
      let shareData = {
        TYPE: "FORM",
        userCode: this.userCodeMar,
      };
      // let uuidShare = _this.shareUuid + "";
      this.$http.post(RequestUrl.MERGE_ACCOUNT, shareData).then(function (res) {
      });
    }

  },
  beforeRouteEnter(to, from, next) {
    // sessionStorage["config_FORM_URL"] = from.path;
    next();
  },
  beforeMount() {
    // alert(typeof (sessionStorage["test"]));
    // if (sessionStorage["config_FORM_URL"] == "/"&&typeof (sessionStorage["config_DATA"])!="undefined") {

    // }else 
    // if (sessionStorage["config_FORM_URL"] == "/") {
    //     this.$common.goUrl(this, RouteUrl.DETAILS);
    // }
  },
  beforeDestroy() {
    // alert("config beforeDestroy");
    // let parm = {
    //     curprice: this.curprice,
    //     seleCountry: this.seleCountry
    // };
    // this.$common.storeCommit(this, Mutations.config_CURPRICE, parm);
    // this.saveData();
    // let localSaveData = {
    //     // index:
    // }
  },
  mounted() {

    document.title = '分享配置';
    //初始化，没有footer
    this.$init.subPageInit(this);


    // window.addEventListener('load', function() {
    //     _this.saveData();
    // });
    // window.addEventListener('popstate', function(ev) {
    //     _this.saveData();
    // });

    //添加上一个页面的价钱


    // this.setData();

    // this.isNewCar = this.appliDto.isNewCar;

    // setTimeout(() => {
    //     _this.isShowCarSele = false;
    // }, 10);

  }
};
</script>

<style  lang="scss">
.radio-check {
  label {
    vertical-align: middle;
  }
}

.common__clause {
  margin-bottom: 50px;
}

.config__iconspan {
  position: absolute;
  margin-top: 4px;
  width: 4px;
  height: 18px;
  background-color: #c8161d;
}

.config__list--title {
  font-size: 15px;
  color: #c8161d;
}

.config__iconspan--title {
  margin-left: 9px;
  font-size: 14px;
}

.config__formPolicy {
  border: 1px solid #e7e7e7;
  margin: 0 18px;
}

.config__formPolicy--group {
  .vux-no-group-title {
    padding-bottom: 20px;
  }
}

.config__footer {
  position: fixed;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 47px;
  background-color: white;
  div {
    height: 100%;
    line-height: 47px;
    text-align: center;
    font-size: 20px;
  }
  box-shadow: 0px 0px 10px 1px #efefef;
}

.config__leftbtn {
  float: left;
  width: 35%;
  background: #fff;
  color: #c8161d;
  span {
    color: #f6690a;
  }
}

.config__rightbtn {
  background: #c8161d;
  color: #fff;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  transition: opacity 0.1s;
}

.config__red {
  color: red;
}

.config__green {
  color: green;
}

.config__policyHolderType {
  font-size: 12px;
  color: #7f7f7f;
}

// .weui-input {
//     color: #000 !important;
// }
.config__middle {
  display: initial;
  vertical-align: super;
}

.config__input {
  line-height: 0px;
  font-size: 14px;
  color: #7f7f7f !important;
  .weui-cell__ft {
    text-align: justify;
    color: #999999;
  }
}

.weui-label {
  font-size: 14px;
  color: #7f7f7f;
}

input::-webkit-input-placeholder {
  font-size: 14px;
  color: #7f7f7f;
}

.config__img {
  width: 15px;
  vertical-align: middle;
}

.config__sure {
  vertical-align: middle;
}

.config__protocol {
  vertical-align: middle;
  color: #c8161d;
}

.config__radio {
  display: inline-flex;
}

.config__input--Bene {
  color: #000;
  font-size: 15px;
}

.config__iconspan--delete {
  font-size: 12px;
  color: #c8161d;
  border: 1px solid #c8161d;
  border-radius: 5px;
  padding: 2px;
  float: right;
  margin-right: 8px;
}

.config__base--padding {
  padding-bottom: 20px;
}

.config__clauseRead {
  border-color: aliceblue;
  white-space: pre-wrap;
  vertical-align: top;
  width: 100%;
  font-size: 15px;
  height: 75vh;
  font-family: Microsoft YaHei;
  overflow-y: scroll; // border: 1px solid #f3f3f3;
  font: 400 14.3333px Arial;
}

.dialog-Einv {
  // padding: 15px !important;
  .weui-dialog {
    max-width: 90% !important;
  }
}

.config_sele {
  .weui-cell__bd {
    .weui-select {
      height: 20px;
      line-height: 20px; // padding-left: 0px;
      padding-left: 10px;
    }
  }
  .weui-cell__bd::after {
    right: -9px !important;
  }
}

.weui-form-preview__label {
  margin-right: 0em !important;
}

.config__actionsheet {
  .weui-actionsheet__cell {
    padding: 0px !important;
    text-align: unset !important;
  }
}
.insure_sele {
  .weui-cell__bd {
    .weui-select {
      height: 20px;
      line-height: 20px; // padding-left: 0px;
      padding-left: 10px;
    }
  }
  .weui-cell__bd::after {
    right: -9px !important;
  }
}

.insure__footer {
  position: fixed;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 47px;
  background-color: #c8161d;
  color: #fff;
  div {
    height: 100%;
    line-height: 47px;
    text-align: center;
    font-size: 20px;
  }
  box-shadow: 0px 0px 10px 1px #efefef;
}
</style>
